import React, {PureComponent } from 'react';

import { StyleSheet, View, ActivityIndicator, Modal } from 'react-native';
import { Colors } from '../Theme/TTheme';

export default class LoadingSpinner extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isVisible: props.visible || false,
    };
  }

  show() {
    this.setState({ isVisible: true });
  }

  close() {
    this.setState({ isVisible: false });
  }

  render() {
    const { isVisible } = this.state;

    return (
      <Modal
        transparent
        onRequestClose={() => {}}
        visible={isVisible}
        animationType="fade"
      >
        <View style={styles.base}>
          <View style={styles.container}>
            <ActivityIndicator size="large" color={Colors.white} />
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  base: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 80,
    height: 80,
    backgroundColor: '#333',
    borderRadius: 10,
  },
});
